<template>
  <div class="test-video-chat">
    <h2>视频聊天测试</h2>
    <div class="test-controls">
      <v-btn @click="testOpenVideoChat" color="primary">
        打开视频聊天窗口
      </v-btn>
      <v-btn @click="testCloseVideoChat" color="error">
        关闭视频聊天窗口
      </v-btn>
    </div>
    
    <div class="test-info">
      <p>当前用户: {{ currentUser?.name || '未选择' }}</p>
      <p>用户ID: {{ currentUser?.userId || '未选择' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { invoke } from '@tauri-apps/api/tauri'

interface TestUser {
  userId: string
  name: string
  avatar: string
}

const currentUser = ref<TestUser>({
  userId: 'test-user-001',
  name: '测试用户',
  avatar: '/default-avatar.png'
})

const testOpenVideoChat = async () => {
  try {
    await invoke('open_video_chat_window', {
      user: currentUser.value,
      isIncoming: false
    })
    console.log('视频聊天窗口已打开')
  } catch (error) {
    console.error('打开视频聊天窗口失败:', error)
  }
}

const testCloseVideoChat = async () => {
  try {
    await invoke('close_video_window')
    console.log('视频聊天窗口已关闭')
  } catch (error) {
    console.error('关闭视频聊天窗口失败:', error)
  }
}
</script>

<style scoped>
.test-video-chat {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.test-controls {
  display: flex;
  gap: 16px;
  margin: 20px 0;
}

.test-info {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
}

.test-info p {
  margin: 8px 0;
}
</style> 